<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <script type="module">
    import { createApp } from 'https://lib.baomitu.com/vue/3.2.31/vue.esm-browser.js'

    // 创建应用实例
    const app = createApp({
      data() {
        return {
          message: 'hello vue3!'
        }
      },
      template: `This is a vue3 demo, message: {{ message }}`
    })
    app.config.errorHandler = (err) => {
      // 捕获所有由子组件上抛而未被处理的错误
    }
    
    // 注册全局组件
    // app.component('MyComponent', 组件实例)
    // 注册全局指令
    // app.directive('focus', 指令对象)
    // 使用插件
    // app.use(MyPlugin)
    // 允许链式
    // app.component('MyComponent', 组件实例)
    //   .directive('focus', 指令对象)
    //   .use(MyPlugin)

    // 由应用实例调用, 返回的是根组件实例
    app.mount('#app')
  </script>

  <!-- 可以创建多个实例,  -->
  <div id="count">
    <button @click="count++">{{ count }}</button>
  </div>
  <script type="module">
    import { createApp } from 'https://lib.baomitu.com/vue/3.2.31/vue.esm-browser.js'
    // 根组件如果没有 template 选项时, 将使用容器的 innerHTML 做为模板
    createApp({
      data() {
        return {
          count: 0
        }
      }
    }).mount('#count')
  </script>
</body>
</html>